<template>
  <div class="voice-icon">
    <ul :class="{ switch: isSwitch }">
      <li
        v-for="index in 3"
        :key="index"
        :class="'li_' + index"
        :style="{ border: '4px solid ' + color }"
      ></li>
    </ul>
  </div>
</template>

<script>
/**
* 语音播放 wifi小图标 动画
* @author 朱琦（1972662943@qq.com）
* @date   时间：2021/12/29
*/
export default {
  props: {
    color: {
      type: String,
      default: '#999999'
    },
    // 是否开启动画
    switch: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      a: true
    }
  },
  computed: {
    isSwitch () {
      return this.switch
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.voice-icon {
  width: 30px;
  ul {
    box-sizing: border-box;
    position: relative;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    overflow: hidden;
    transform: rotate(320deg);
    margin: 0;
  }

  li {
    border-radius: 50%;
    position: absolute;
  }
  .li_1 {
    width: 5px;
    height: 5px;
    left: -3px;
    top: -3px;
  }

  .li_2 {
    width: 25px;
    height: 25px;
    top: -10px;
    left: -10px;
  }

  .li_3 {
    width: 40px;
    height: 40px;
    top: -15px;
    left: -15px;
  }
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .switch {
    .li_2 {
      animation: fadeInOut 1s infinite 0.2s;
    }
    .li_3 {
      animation: fadeInOut 1s infinite 0.4s;
    }
  }
}
</style>
